<#include "/common/taglibs.ftl" />
<!DOCTYPE html>

<!--
Template Name: Metronic - Responsive Admin Dashboard Template build with Twitter Bootstrap 4
Author: KeenThemes
Website: http://www.keenthemes.com/
Contact: support@keenthemes.com
Follow: www.twitter.com/keenthemes
Dribbble: www.dribbble.com/keenthemes
Like: www.facebook.com/keenthemes
Purchase: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
Renew Support: http://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469?ref=keenthemes
License: You must have a valid license purchased only from themeforest(the above link) in order to legally use the theme for your project.
-->
<html lang="en">

<!-- begin::Head -->
<head>
    <meta charset="utf-8" />
    <title>Metronic | Login Page - 6</title>
    <meta name="description" content="Latest updates and statistic charts">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">

    <!--begin::Web font -->
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
    <script>
        WebFont.load({
            google: {
                "families": ["Poppins:300,400,500,600,700", "Roboto:300,400,500,600,700"]
            },
            active: function() {
                sessionStorage.fonts = true;
            }
        });
    </script>

    <!--end::Web font -->

    <!--begin::Base Styles -->
    <link href="${theme}/assets/vendors/base/vendors.bundle.css" rel="stylesheet" type="text/css" />

    <!--RTL version:<link href="${theme}/assets/vendors/base/vendors.bundle.rtl.css" rel="stylesheet" type="text/css" />-->
    <link href="${theme}/assets/demo/default/base/style.bundle.css" rel="stylesheet" type="text/css" />

    <!--RTL version:<link href="${theme}/assets/demo/default/base/style.bundle.rtl.css" rel="stylesheet" type="text/css" />-->

    <!--end::Base Styles -->
    <link rel="shortcut icon" href="${theme}/assets/demo/default/media/img/logo/favicon.ico" />
</head>

<!-- end::Head -->

<!-- begin::Body -->
<body class="m--skin- m-header--fixed m-header--fixed-mobile m-aside-left--enabled m-aside-left--skin-dark m-aside-left--fixed m-aside-left--offcanvas m-footer--push m-aside--offcanvas-default">

<!-- begin:: Page -->
<div class="m-grid m-grid--hor m-grid--root m-page">
    <div class="m-grid__item m-grid__item--fluid   m-grid m-grid--desktop m-grid--ver-desktop m-grid--hor-tablet-and-mobile   m-login m-login--6" id="m_login">
        <div class="m-grid__item   m-grid__item--order-tablet-and-mobile-2  m-grid m-grid--hor m-login__aside " style="background-image: url(${theme}/assets/app/media/img/bg/bg-4.jpg);">
            <div class="m-grid__item">
                <div class="m-login__logo">
                    <a href="#">
                        <img src="${theme}/assets/app/media/img/logos/logo-4.png">
                    </a>
                </div>
            </div>
            <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver">
                <div class="m-grid__item m-grid__item--middle">
                    <span class="m-login__title">Whatever CTA's wave purpose important exit element</span>
                    <span class="m-login__subtitle">Lorem ipsum amet estudiat</span>
                </div>
            </div>
            <div class="m-grid__item">
                <div class="m-login__info">
                    <div class="m-login__section">
                        <a href="#" class="m-link">&copy 2018 Metronic</a>
                    </div>
                    <div class="m-login__section">
                        <a href="#" class="m-link">Privacy</a>
                        <a href="#" class="m-link">Legal</a>
                        <a href="#" class="m-link">Contact</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="m-grid__item m-grid__item--fluid  m-grid__item--order-tablet-and-mobile-1  m-login__wrapper">

            <!--begin::Head-->
            <div class="m-login__head">
                <span>Don't have an account?</span>
                <a href="#" class="m-link m--font-danger">Sign Up</a>
            </div>

            <!--end::Head-->

            <!--begin::Body-->
            <div class="m-login__body">

                <!--begin::Signin-->
                <div class="m-login__signin">
                    <div class="m-login__title">
                        <h3>Create Account</h3>
                    </div>



                    <!--begin::Form-->
                    <form class="m-login__form m-form" action="" method="POST">
                        <#if Session.SPRING_SECURITY_LAST_EXCEPTION??>
                            <div class="m-alert m-alert--outline alert alert-danger alert-dismissible animated fadeIn"
                                 role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                                <#if Session.SPRING_SECURITY_LAST_EXCEPTION.getMessage()??>
                                    <span>${Session.SPRING_SECURITY_LAST_EXCEPTION.getMessage()}</span>
                                <#else>
                                    <span>Unknown System Error</span>
                                </#if>
                            </div>
                        </#if>

                        <div class="form-group m-form__group">
                            <input class="form-control m-input" type="text" placeholder="Username" name="username" autocomplete="off">
                        </div>
                        <div class="form-group m-form__group">
                            <input class="form-control m-input m-login__form-input--last" type="password" placeholder="Password" name="password">
                        </div>
                        <div class="form-group m-form__group" style="margin: 15px auto;">
                            <div class="col m--align-left">
                                <label class="m-checkbox m-checkbox--focus">
                                    <input type="checkbox" name="remember-me"> Remember me
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </form>

                    <!--end::Form-->

                    <!--begin::Action-->
                    <div class="m-login__action">
                        <a href="#" class="m-link">
                            <span>Forgot Password ?</span>
                        </a>
                        <a href="#">
                            <button id="m_login_signin_submit" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--air m-login__btn m-login__btn--primary">Sign In</button>
                        </a>
                    </div>

                    <!--end::Action-->

                    <!--begin::Divider-->
                    <div class="m-login__form-divider">
                        <div class="m-divider">
                            <span></span>
                            <span>OR</span>
                            <span></span>
                        </div>
                    </div>

                    <!--end::Divider-->

                    <!--begin::Options-->
                    <div class="m-login__options">
                        <a href="#" class="btn btn-primary m-btn m-btn--pill  m-btn  m-btn m-btn--icon">
									<span>
										<i class="fab fa-facebook-f"></i>
										<span>QQ</span>
									</span>
                        </a>
                        <a href="${ctx}/login/weixin" class="btn btn-info m-btn m-btn--pill  m-btn  m-btn m-btn--icon">
									<span>
										<i class="fab fa-twitter"></i>
										<span>Wechat</span>
									</span>
                        </a>
                        <a href="${ctx}/login/github" class="btn btn-danger m-btn m-btn--pill  m-btn  m-btn m-btn--icon">
									<span>
										<i class="fab fa-google"></i>
										<span>Github</span>
									</span>
                        </a>
                    </div>

                    <!--end::Options-->
                </div>

                <!--end::Signin-->
            </div>

            <!--end::Body-->
        </div>
    </div>
</div>

<!-- end:: Page -->

<!--begin::Base Scripts -->
<script src="${theme}/assets/vendors/base/vendors.bundle.js" type="text/javascript"></script>
<script src="${theme}/assets/demo/default/base/scripts.bundle.js" type="text/javascript"></script>
<script src="${static}/scripts/m.core.js" type="text/javascript"></script>

<!--end::Base Scripts -->

<!--begin::Page Snippets -->
<#--<script src="${theme}/assets/snippets/custom/pages/user/login6.js" type="text/javascript"></script>-->
<script>
    /*jQuery(function($){
        $("#m_login_signin_submit").click(function(){
            $(this).addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);
            alert("111");
        });
    });*/


    var Login = function () {

        var showErrorMsg = function (form, type, msg) {
            var alert = $('<div class="m-alert m-alert--outline alert alert-' + type + ' alert-dismissible" role="alert">\
			<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>\
			<span></span>\
		</div>');

            form.find('.alert').remove();
            alert.prependTo(form);
            //alert.animateClass('fadeIn animated');
            mUtil.animateClass(alert[0], 'fadeIn animated');
            alert.find('span').html(msg);
        }

        //== Private Functions

        var handleSignInFormSubmit = function () {
            $('#m_login_signin_submit').click(function (e) {
                e.preventDefault();
                var btn = $(this);
                var $form = $('.m-login__form');

                $form.validate({
                    rules: {
                        username: {
                            required: true
                        },
                        password: {
                            required: true
                        }
                    }
                });

                if (!$form.valid()) {
                    return;
                }

                btn.addClass('m-loader m-loader--right m-loader--light').attr('disabled', true);

                /*$.m.ajaxSubmit($form, {
                    url: '',
                    type: 'POST',
                    successCallback: function (response, status, xhr, $form) {
                        // similate 2s delay
                        setTimeout(function () {
                            btn.removeClass('m-loader m-loader--right m-loader--light').attr('disabled', false);
                            showErrorMsg($form, 'danger', 'Incorrect username or password. Please try again.');
                        }, 2000);
                    }
                });*/
                $form[0].submit();
//                $form.ajaxSubmit();
            });
        }

        //== Public Functions
        return {
            // public functions
            init: function () {
                handleSignInFormSubmit();
            }
        };
    }();

    //== Class Initialization
    jQuery(document).ready(function () {
        Login.init();
    });
</script>



<!--end::Page Snippets -->
</body>

<!-- end::Body -->
</html>